<template>
  <div class="login">
     <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6">
            <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item
                label="用户名"
                prop="username"
                :rules="[
                { required: true, message: '用户名不能为空'},
                ]"
            >
                <el-input type="username" v-model.number="numberValidateForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="密码"
                prop="password"
                :rules="[
                { required: true, message: '密码不能为空'},
                ]"
            >
                <el-input type="password" v-model.number="numberValidateForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm('numberValidateForm')">重置</el-button>
            </el-form-item>
            </el-form>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
  </div>
</template>

<script>

//导出home路由
export default {
  name: 'login',
  components: {
  },
   data() {
    return {
        numberValidateForm: {
            username: '',
            password: '',
        },
      
    }
    
    },
    methods: {
        submitForm() {
            //发送请求到后端
            this.$ax.get('/epai/user/userLogin', {
                params:{
                    username:this.numberValidateForm.username,
                    password:this.numberValidateForm.password
                    }})
            .then((response) => {
                if (response.data.success) {
                    console.log(response.data.data.id)
                    sessionStorage.setItem("uid",response.data.data.id)
                    sessionStorage.setItem("username",response.data.data.username)
                    this.$notify({
                        title: '登录成功',
                        message: '欢迎用户' + this.numberValidateForm.username + "登录成功 ",
                        type: 'success',
                        duration: 1000
                    });
                    this.addTeacherTable = false;
                    this.$router.push({path:'/index',query:{user:response.data.data}});
                    ;
                } else {
                    this.$notify({
                        title: '登录失败',
                        message: response.data.message,
                        type: 'error',
                        duration: 1000
                    });
                }
            }).catch(error => {
                console.error(error);
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

    }
}
</script>
